<template>
	<NavBar :obj="{ title: '上传物流', color: '#000', backgroundColor: '#fff' }" />
	<view class="container">
		<view class="title"></view>
		<view class="main">
			<u-row class="main_li">
				<u-col span="3">物流公司</u-col>
				<u-col span="9" class="bank" @click="bankShow = true">
					<view :class="{ gray: !infoRef.express_title }">
						{{ infoRef.express_title != '' ? infoRef.express_title : '请选择物流公司' }}
					</view>
					<view><u-icon name="arrow-down" color="#333" size="16" class="arrow-down"></u-icon></view>
				</u-col>
			</u-row>

			<u-row class="main_li">
				<u-col span="3">物流单号</u-col>
				<u-col span="9">
					<view>
						<input type="text" v-model="infoRef.express_code" placeholder="请填写物流单号" class="inp" placeholder-class="place-inp" />
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="confirm" @click="submit">确认</view>
		<u-picker :show="bankShow" :columns="expressList" @cancel="bankShow = false" @confirm="confirm" keyName="title"></u-picker>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { port, goUrl, hint, goBack, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const expressList = ref([]);
	const bankShow = ref(false);
	const infoRef = ref({
		id: '',
		express_id: '',
		express_title: '',
		express_code: ''
	});

	onLoad((e) => {
		if (e.id) {
			infoRef.value.id = e.id;
		}
	});

	onShow(() => {
		getExpress();
	});
	async function getExpress() {
		let res = await port('getExpress');
		expressList.value = [res.data];
	}

	function confirm(e) {
		infoRef.value.express_id = e.value[0].id;
		infoRef.value.express_title = e.value[0].title;
		bankShow.value = false;
	}
	async function submit() {
		
		if(!infoRef.value.express_id){
			hint('请选择物流公司');
			return false;
		}
		
		if(!infoRef.value.express_code){
			hint('请填写物流单号');
			return false;
		}
		
		loading();
		let res = await port('editExpress', infoRef.value);
		setTimeout(() => {
			closeLoading();
			hint(res.msg);
			goBack();
		}, 300);
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	
	.container {
		margin: 0 30upx;
		.title {
			margin-top: 44upx;
			color: #666;
			font-size: 26upx;
		}
		.main {
			background: #fff;
			border-radius: 20upx;
			margin-top: 30upx;
			.main_li:last-child {
				border-bottom: none !important;
			}
			.main_li {
				height: 100upx;
				color: #000;
				font-size: 28upx;
				display: flex;
				flex: 1 2 0%;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #eee;
				view {
					color: #000;
					display: flex;
					text-align: left;
					font-size: 28upx;
					input {
						width: 100%;
						font-size: 28upx;
					}
					.inp {
						color: #000;
					}
					
					.place-inp {
						color: #bdbdbd;
					}
					
				}
				.bank {
					display: flex;
					justify-content: space-between !important;
					align-items: center;
					view {
						color: #000;
					}
					.gray {
						color: #bdbdbd;
					}
				}
				view:last-child {
					color: #bdbdbd;
				}
			}
		}
		.confirm {
			margin-top: 86upx;
			color: #fff;
			background: linear-gradient(-90deg, #fb3204 0%, #fe7800 100%);
			text-align: center;
			line-height: 88upx;
			border-radius: 88upx;
		}
	}
</style>
